<template>
<div class="login_page">
	  	<transition name="form-fade" mode="in-out">
	  		<section class="form_contianer">
			     <div class='titleArea rflex'>
					<!-- <img class="logo" :src="logo" alt="小爱admin"> -->
					<span class='title'>小爱<i>Admin</i></span>
				</div>
		    	<el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef" class="loginForm">
					<el-form-item prop="account" class="login-item">
					    <span class="fa-tips"><i class="fa fa-user"></i></span>
						<el-input  class="area" type="text" placeholder="用户名" v-model="loginForm.account" ></el-input>
					</el-form-item>
					<el-form-item prop="password" class="login-item">
					    <span class="fa-tips"><i class="fa fa-lock"></i></span>
						<el-input @keyup.enter.native ="login" class="area" type="password" placeholder="密码" v-model="loginForm.password"></el-input>
					</el-form-item>
					<el-form-item>
				    	<!-- <el-button type="primary"  @click="submitForm('loginForm')" class="submit_btn">SIGN IN</el-button> -->
                        <el-button type="primary" @click="login" >登录</el-button>
                        <el-button type="danger" @click="reset">重置</el-button>
				  	</el-form-item>
				</el-form>
	  		</section>
	  	</transition>
  	</div>
</template>

<script>
import moment from 'moment'
import { auth } from '@/utils/config' // 授权api
import { getUserInfo } from '@/utils/tool' //获取用户信息
import { mapActions } from 'vuex'
export default {
    name:'login',
    data() {
        return {
            rememberPassword:false,
            loginForm: {
                account: 'test',
                password:'test12345',
                grant_type: 'user_token'
            },
            //登录表单验证规则对象
            loginFormRules: {
                //用户名的校验规则
                account:[{required:true,message:'请输入登录密码',trigger:'blur'}],
                password:[{required:true,message:'请输入登录密码',trigger:'blur'}]
            }
        }
    },
    methods:{
        // ...mapActions('menu',['getMenuList']),
        //点击重置
        reset() {
            this.$refs.loginFormRef.resetFields()
        },
        login() {
            this.$refs.loginFormRef.validate(async valid =>{
                if (!valid) return;
                let params = new URLSearchParams()
                params.append('grant_type','user_token')
                params.append('account',this.loginForm.account)
                params.append('password',this.loginForm.password)
                try {
                    const  data  = await this.$axios.oauth.login(params)
                        window.sessionStorage.setItem( "token",`${data.token_type} ${data.access_token}`)
                        window.sessionStorage.setItem('account',this.loginForm.account)
                        window.sessionStorage.setItem('password',this.loginForm.password)
                        // getUserInfo().then(data=> window.sessionStorage.setItem('role',data))
                        // this.$router.push('/home') --大数据总览页面
                        this.$router.push('/layout')
                        this.$message.success('登录成功')
                }catch (e) {
                    window.console.log(e)
                }
            })
        },
        loginByWechat(){}
    }
}
</script>

<style lang="less" scoped>
	.login_page{
		position: absolute;
		width: 100%;
		height: 100%;
		background: url(../../assets/image/bg9.jpg) no-repeat center center;
		background-size: 100% 100%;
	}
	.form_contianer{
		position: absolute;
		top: 50%;
        left: 50%;
		transform: translate(-50%,-50%);
		background: #fff;
		width:370px;
		border-radius: 5px;
		padding: 25px;
		text-align: center;
		.titleArea{
			justify-content: center;
   			align-items: center;
			text-transform: uppercase;
			font-size: 22px;
			width: 100%;
			padding-bottom: 20px;
			.logo{
				width: 40px;
    			margin-right: 10px;
			}
			.title{
				i{
				   color: #FF6C60;
				}
			}
		}
	
		.loginForm{
			.submit_btn{
				width: 100%;
				padding:13px 0;
				font-size: 16px;
			}
			.fa-tips{
				position: absolute;
				left: 10px;
				z-index: 20;
				color: #FF7C1A;
				font-size: 18px;
				top: 50%;
				transform: translateY(-50%);
			}
	    }
	}

	.manage_tip{
		margin-bottom:20px;
		.title{
			font-family: cursive;
			font-weight: bold;
			font-size: 26px;
			color:#fff;
		}
		.logo{
			width:60px;
			height:60px;
		}
	}
	
	.tiparea{
		text-align:left;
		font-size: 12px;
		color: #4cbb15;
		padding: 10px 0;
		.tip{
			margin-left: 54px;
		}
		.tips{
			color:red;
		}
	}
	
	.form-fade-enter-active, .form-fade-leave-active {
	  	transition: all 1s;
	}
	.form-fade-enter, .form-fade-leave-active {
	  	transform: translate3d(0, -50px, 0);
	  	opacity: 0;
	}
	.loginForm{
		.el-button--primary{
			background-color:#FF7C1A;
			border:1px solid #FF7C1A;
		}
	}
	.sanFangArea{
		border-top: 1px solid #DCDFE6;
		padding: 10px 0;
		display: none;
		.title{
			font-size: 14px;
			color: #8b9196;
			margin-bottom: 10px;
		}
		ul{
			li{
				flex:1;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				.svg-icon{
					font-size: 24px;
				}
			}
		}
	}
</style>


